<template>
	<view class="videoPlayer">
		<video class="video" id="myVideo" :src="video.url" :controls="false" :loop="true" @click="click"></video>
		<view class="left-box"><listLeft :video="video"></listLeft></view>
		<view class="right-box"><listRight :video="video"  ref="right"></listRight>
		</view>
	</view>
</template>

<script>
	export default {
		name: "videoPlayer",
		props: ['video'],
		data() {
			return {
				play: false,
				dblClick:false
			};
		},
		methods: {
			doubleClick(){
				//点赞，调用 listRight 中方法
				console.log('11')
				this.$refs.right.change()
			},
			click() {
				clearTimeout()
				this.dblClick = !this.dblClick
				timer = setTimeout(() => {
					//300ms之内dblClick为true为单击
					if (this.dblClick) {
						//单击
						if (this.play === false) {
							this.playerThis()
						} else {
							this.pause()
						}
					} else {
						//双击
						console.log('双击了')
						
						this.doubleClick()
					}
					this.dblClick = false
				}, 300)
			},
			player() {
				console.log("paly")
				if (this.play === false) {
					this.videoContext.seek(0)
					this.videoContext.play()
					this.play = true
				}
			},
			pause() {
				console.log("pause")
				if (this.play === true) {
					this.videoContext.pause()
					this.play = false
				}
			},
			playerThis() {
				if (this.play === false) {
					this.videoContext.play()
					this.play = true
				}
			}
		},
		created() {
			this.videoContext = uni.createVideoContext("myVideo", this)
		}
	}
</script>

<style lang="scss">
	.videoPlayer {
		width: 100%;
		height: 100%;

		.video {
			width: 100%;
			height: 100%;
		}
		.left-box{
			z-index: 20;
			position: absolute;
			bottom: 20px;
			left: 10px;
			
		}
		.right-box{
			z-index: 20;
			position: absolute;
			bottom: 20px;
			right: 10px;
			
		}
	}
</style>
